<template>
	<div>
		<canvas width="200" height="200" id="canvas"	ref="canvas"></canvas>
	</div>
</template>
<script type="text/javascript">
	import { Game, GameObject, resource, RESOURCE_TYPE, LOAD_EVENT	} from '@eva/eva.js'
	import { RendererSystem } from '@eva/plugin-renderer'
	import { Graphics, GraphicsSystem } from '@eva/plugin-renderer-graphics'
	import {PhysicsSystem, Physics, PhysicsType} from '@eva/plugin-matterjs';
	export default{
		name: 'EvajsStudyShowTransition',
		data(){
			return {
				percent: 0,
				game: null
			}
		},
		created(){
			this.$nextTick(()=>{
				this.test()
			})
		},
		destroyed(){
			if(this.game){
				this.game.destroy()
			}
		},
		methods:{
			test(){
				// 创建游戏
				this.game = new Game({
					systems: [ // 游戏添加渲染系统
						new RendererSystem({
							canvas: this.$refs.canvas,
							width: 400,
							height: 400,
							backgroundColor: 0x101010
						}),
						// 游戏系统
						new GraphicsSystem(),
						new PhysicsSystem({
							resolution: 2, // 保持RendererSystem的resolution一致
							// isTest: true, // 是否开启调试模式
							// element: document.getElementById('game-container'), // 调试模式下canvas节点的挂载点
							world: {
								gravity: {
									y: 2, // 重力
								},
							},
							mouse: {
								open: true,
							},
						})

					],
				});
				let r = this.createRect("r1",175,0,50,50)
				let r2 = this.createRect("r2",175,300,50,50)
				r2.addComponent(
					new Physics({
						type: PhysicsType.RECTANGLE,
						bodyOptions: {
								isStatic: true, // 物体是否静止，静止状态下任何作用力作用于物体都不会产生效果
								restitution: 0.8,
								frictionAir: 0.1,
								friction: 0,
								frictionStatic: 0,
								force: {
									x: 0,
									y: 0,
								},
						},
						stopRotation: true, // 默认false，通常不用设置
					})
				)
				let physics = r.addComponent(
					new Physics({
						type: PhysicsType.RECTANGLE,
						bodyOptions: {
								isStatic: false, // 物体是否静止，静止状态下任何作用力作用于物体都不会产生效果
								restitution: 0.8,
								frictionAir: 0.1,
								friction: 0,
								frictionStatic: 0,
								force: {
									x: 0,
									y: 0,
								},
						},
						stopRotation: true, // 默认false，通常不用设置
					})
				)
				console.log(123456)
				this.game.scene.addChild(r)
				this.game.scene.addChild(r2)

				physics.on('collisionStart', (body, gameObject1, gameObject2) => {
					console.log(body, gameObject1, gameObject2)
				});
			},
			createRect(name,x,y,width,height){
				// 游戏对象
				const outter = new GameObject(name+"_outter", {
					position: {
						x: x,
						y: y
					},
					size: {
						width: width,
						height: height
					}
				})
				const outterG = outter.addComponent(new Graphics())
				outterG.graphics.beginFill(0xffffff, 1)
				outterG.graphics.drawRect(0, 0, width, height)
				outterG.graphics.endFill()

				const rect = new GameObject(name+"_inner", {
					position: {
						x: 1,
						y: 1
					},
					size: {
						width: width-2,
						height: height-2
					}
				})
				const g = rect.addComponent(new Graphics())
				g.graphics.beginFill(0xde0000, 1)
				g.graphics.drawRect(0, 0, width-2, height-2)
				g.graphics.endFill()
				outter.addChild(rect)
				return outter
			}
		}
	}
</script>